import {lazy, Suspense} from 'react'

import { Navigate } from "react-router-dom";
import Home from "../pages/Home/Home";
import Message from "../pages/Message/Message";
import News from "../pages/News/News";
import About from "../pages/About/About";
import NotFound from "../pages/NotFound/NotFound";
// import HeroCom from "../pages/Heros/HeroCom";
// import HeroDetail from "../pages/HeroDetail/HeroDetail";
let HeroCom = lazy(() => import('../pages/Heros/HeroCom'));
let HeroDetail = lazy(() => import('../pages/HeroDetail/HeroDetail'));

//创建一个变量
let routesArr = [
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: 'news',
        element: <News />
      },
      {
        path: 'message',
        element: <Message />
      },
      {
        index: true,
        // element: <Welcome />
        element: <Navigate to="/home/news" />
      }
    ]
  },
  // <Route path="" element={} caseSensive />
  {
    path: '/about',
    element: <About />,
    caseSensitive: true
  },
  {
    path:'/heros',
    element: <Suspense fallback={<div>加载中....</div>}>
      <HeroCom />
    </Suspense>
  },
  {
    path: '/hero',
    element: <Suspense fallback={<div>加载中....</div>}>
      <HeroDetail />
    </Suspense>
  },
  {
    path: '*',
    element: <NotFound />
  },
];

//暴露
export default routesArr;

